<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="../css/index.css" />
  </head>

  <body>
    <section id="wrap">
      <h2 class="title">百度音乐榜单</h2>
      <ul id="list"></ul>
      <footer class="footer">
        <label><input type="checkbox" id="checkAll" />全选/全不选</label>
        <a href="javascript:;" id="remove">删除</a>
        <input type="text" id="newInfo" />
        <a href="javascript:;" id="add">添加</a>
      </footer>
    </section>
    <script>
      var data = [
        {
          id: 0,
          title: "残酷月光 - 费启鸣",
          checked: false,
          collect: true,
        },
        {
          id: 1,
          title: "兄弟 - 艾热",
          checked: false,
          collect: false,
        },
        {
          id: 2,
          title: "毕生 - 夏增祥",
          checked: false,
          collect: true,
        },
        {
          id: 3,
          title: "公子向北去 - 李春花",
          checked: false,
          collect: false,
        },
        {
          id: 4,
          title: "战场 - 沙漠五子",
          checked: false, //是否被勾选   可以不入数据库
          collect: false, //是否收藏 true 收藏 false 没有收藏
        },
      ];
      var listEle = document.querySelector("#list");
      function renderDom(arr) {
        listEle.innerHTML = "";
        arr.forEach(function (item, key) {
          var liEle = document.createElement("li");
          // item.collect为true 取消收藏出现 item.collect为 false 出现收藏
          // item.checked为true 勾选 item.checked为true 不勾选
          liEle.innerHTML = `<input type="checkbox" class="a1"${
            item.checked ? "checked" : ""
          } />
          <span>${item.title}</span>
          <a href="javascript:;" class="cancel">${
            item.collect ? "取消收藏" : "收藏"
          }</a>
          <a href="javascript:;" class="remov">删除</a>`;
          //获取取消收藏按键，点击时使数组对象里的collect值不等于之前的值，实现取消收藏和收藏的出现和消失
          var cancelEle = liEle.querySelector(".cancel");
          cancelEle.onclick = function () {
            console.log(data);
            item.collect = !item.collect;
            // console.log(data);
            renderDom(data);
          };
          //删除  获取删除键 点击时通过索引截取删除数组里面的指定对象
          var removeEle = liEle.querySelector(".remov");
          removeEle.onclick = function () {
            arr.splice(key, 1);
            renderDom(data);
          };
          // 多选框
          liEle.querySelector("input").onclick = function () {
            item.checked = !item.checked;
            let temp_bool = true;
            data.forEach((obj) => {
              if (!obj.checked) {
                temp_bool = false;
              }
            });
            document.querySelector("#checkAll").checked = temp_bool;
          };
          //将新生成的li插入ul里
          listEle.appendChild(liEle);
        });
      }
      renderDom(data);
      //全选or全不选
      var checkAllEle = document.querySelector("#checkAll");
      //当第一次点击时将所有的checked赋值为ture实现全选
      checkAllEle.onclick = function () {
        data.forEach(function (item) {
          // console.log(item.checked);
          item.checked = checkAllEle.checked;
        });
        renderDom(data);
      };

      //添加 获取新添加的value值，再将它放入对象中，再添加进数组
      var addEle = document.querySelector("#add");
      var newInfoEle = document.querySelector("#newInfo");
      addEle.onclick = function () {
        var input = {
          title: newInfoEle.value,
        };
        data.push(input);
        newInfoEle.value = "";
        renderDom(data);
      };
      //删除选中项
      var delEle = document.querySelector("#remove");
      delEle.onclick = function () {
        data = data.filter(function (item, key) {
          return item.checked == false;
        });
        renderDom(data);
      };
    </script>
  </body>
</html>
